// 工单设置
import type { orderSetStateType } from './typings'
import { defineComponent, onMounted, reactive } from 'vue'
import { useStore } from 'vuex'
import { ElTabs, ElTabPane, ElCard } from 'element-plus'
import RepairSource from '~/pages/oam/components/orderSet/RepairSource' // 报修来源
import EmergencyDegree from '~/pages/oam/components/orderSet/EmergencyDegree' // 紧急程度
import WhyProblem from '~/pages/oam/components/orderSet/WhyProblem' // 故障原因
import AssessManage from '~/pages/oam/components/orderSet/AssessManage' // 考核指标
import OperationsManage from '~/pages/oam/components/orderSet/OperationsManage' // 运维部门
import styles from '~/pages/oam/index.module.scss'

export default defineComponent(function OrderSet() {
  const store = useStore()

  // 初始值
  const state = reactive<orderSetStateType>({
    activeName: 'one',
    repairSourceKey: '',
    emergencyDegreeKey: '',
    whyProblemKey: '',
    assessManageKey: ''
  })

  onMounted(() => {
    getDictByCodeAjax()
  })

  // method
  const getDictByCodeAjax = async () => {
    const res = await store.dispatch('order/GetDataDictionaryByCode', { code: 'cfg_order_cycle' })
    if (res?.code === 200) {
      state.repairSourceKey = res.data[1].dictKey
      state.emergencyDegreeKey = res.data[2].dictKey
      state.whyProblemKey = res.data[3].dictKey
      state.assessManageKey = res.data[4].dictKey
    }
  }

  return () => (
    <ElCard shadow={'never'}>
      <ElTabs v-model={state.activeName}>
        <ElTabPane label="报修来源管理" name="one">
          <div class={styles['to-bottom']}>
            {state.repairSourceKey && <RepairSource repairSourceKey={state.repairSourceKey} />}
          </div>
        </ElTabPane>
        <ElTabPane label="紧急程度管理" name="two">
          <div class={styles['to-bottom']}>
            {state.emergencyDegreeKey && (
              <EmergencyDegree emergencyDegreeKey={state.emergencyDegreeKey} />
            )}
          </div>
        </ElTabPane>
        <ElTabPane label="故障原因管理" name="three">
          <div class={styles['to-bottom']}>
            {state.whyProblemKey && <WhyProblem whyProblemKey={state.whyProblemKey} />}
          </div>
        </ElTabPane>
        <ElTabPane label="考核指标管理" name="four">
          <div class={styles['to-bottom']}>
            {state.assessManageKey && <AssessManage assessManageKey={state.assessManageKey} />}
          </div>
        </ElTabPane>
        <ElTabPane label="运维部门管理" name="five">
          <div class={styles['to-bottom']}>
            <OperationsManage />
          </div>
        </ElTabPane>
      </ElTabs>
    </ElCard>
  )
})
